{% extends "base/nav.html" %}
{% load static %}

{% block title %}旅游景点 - 旅游舆情监测系统{% endblock %}

{% block content %}
<div class="container">
    <!-- 页面标题和搜索栏 -->
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h1>
                    <i class="fa fa-map-marker"></i> 旅游景点
                    <small class="text-muted">探索精彩的旅游目的地</small>
                </h1>
            </div>
        </div>
    </div>

    <!-- 搜索和筛选栏 -->
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <form method="get" action="" class="form-inline">
                        <div class="form-group">
                            <input type="text" name="search" class="form-control" placeholder="搜索景点名称..." value="{{ request.GET.search }}">
                        </div>
                        <div class="form-group" style="margin-left: 10px;">
                            <select name="city" class="form-control">
                                <option value="">所有城市</option>
                                <option value="北京" {% if request.GET.city == '北京' %}selected{% endif %}>北京</option>
                                <option value="上海" {% if request.GET.city == '上海' %}selected{% endif %}>上海</option>
                                <option value="广州" {% if request.GET.city == '广州' %}selected{% endif %}>广州</option>
                                <option value="深圳" {% if request.GET.city == '深圳' %}selected{% endif %}>深圳</option>
                                <!-- 添加更多城市选项 -->
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary" style="margin-left: 10px;">
                            <i class="fa fa-search"></i> 搜索
                        </button>
                        <a href="?" class="btn btn-default" style="margin-left: 10px;">
                            <i class="fa fa-refresh"></i> 重置
                        </a>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 景点统计信息 -->
    <div class="row">
        <div class="col-md-12">
            <div class="well well-sm">
                <div class="row">
                    <div class="col-md-3 text-center">
                        <h4 class="text-primary">{{ object_list.count }}</h4>
                        <small class="text-muted">总景点数</small>
                    </div>
                    <div class="col-md-3 text-center">
                        <h4 class="text-success">{{ popular_count }}</h4>
                        <small class="text-muted">热门景点</small>
                    </div>
                    <div class="col-md-3 text-center">
                        <h4 class="text-info">{{ positive_count }}</h4>
                        <small class="text-muted">正面评价</small>
                    </div>
                    <div class="col-md-3 text-center">
                        <h4 class="text-warning">{{ total_views }}</h4>
                        <small class="text-muted">总浏览数</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 景点列表 -->
    <div class="row">
        {% if object_list %}
            {% for attraction in object_list %}
            <div class="col-md-4 col-sm-6">
                <div class="panel panel-default attraction-card">
                    <div class="panel-body" style="padding: 0;">
                        <!-- 景点图片 -->
                        <div class="attraction-image-container">
                            {% if attraction.main_image %}
                                <img src="{{ attraction.main_image.url }}" alt="{{ attraction.name }}"
                                     class="img-responsive attraction-image">
                            {% else %}
                                <img src="{% static 'images/default-attraction.jpg' %}" alt="默认图片"
                                     class="img-responsive attraction-image">
                            {% endif %}
                            <div class="attraction-overlay">
                                <a href="{% url 'main:attraction_detail' attraction.pk %}" class="btn btn-primary btn-sm">
                                    <i class="fa fa-eye"></i> 查看详情
                                </a>
                            </div>
                        </div>

                        <!-- 景点信息 -->
                        <div style="padding: 15px;">
                            <h4 class="attraction-title">
                                <a href="{% url 'main:attraction_detail' attraction.pk %}">{{ attraction.name }}</a>
                                {% if attraction.is_featured %}
                                <span class="label label-warning pull-right">推荐</span>
                                {% endif %}
                            </h4>

                            <p class="text-muted location-info">
                                <i class="fa fa-map-marker"></i>
                                {{ attraction.location }}
                                {% if attraction.city %}
                                <small>({{ attraction.city }})</small>
                                {% endif %}
                            </p>

                            <p class="attraction-description">
                                {{ attraction.description|truncatewords:20 }}
                            </p>

                            <!-- 景点统计信息 -->
                            <div class="row attraction-stats">
                                <div class="col-xs-4 text-center">
                                    <small class="text-muted">
                                        <i class="fa fa-eye"></i><br>
                                        {{ attraction.view_count|default:0 }}
                                    </small>
                                </div>
                                <div class="col-xs-4 text-center">
                                    <small class="text-muted">
                                        <i class="fa fa-comment"></i><br>
                                        {{ attraction.comment_count|default:0 }}
                                    </small>
                                </div>
                                <div class="col-xs-4 text-center">
                                    <small class="text-muted">
                                        <i class="fa fa-star"></i><br>
                                        {{ attraction.avg_rating|default:0 }}/5
                                    </small>
                                </div>
                            </div>

                            <!-- 情感标签 -->
                            {% if attraction.sentiment_score %}
                            <div class="sentiment-tag text-center" style="margin-top: 10px;">
                                <span class="label label-{% if attraction.sentiment_score > 0.1 %}success{% elif attraction.sentiment_score < -0.1 %}danger{% else %}warning{% endif %}">
                                    {% if attraction.sentiment_score > 0.1 %}
                                        <i class="fa fa-smile-o"></i> 正面
                                    {% elif attraction.sentiment_score < -0.1 %}
                                        <i class="fa fa-frown-o"></i> 负面
                                    {% else %}
                                        <i class="fa fa-meh-o"></i> 中性
                                    {% endif %}
                                </span>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
        <!-- 没有景点时的显示 -->
        <div class="col-md-12">
            <div class="jumbotron text-center">
                <h2><i class="fa fa-map-o"></i> 暂无景点信息</h2>
                <p class="lead">没有找到符合条件的景点信息</p>
                <p>请尝试调整搜索条件，或者 <a href="?" class="btn btn-link">查看所有景点</a></p>
                {% if user.is_staff %}
                <a href="{% url 'admin:main_touristattraction_add' %}" class="btn btn-primary btn-lg">
                    <i class="fa fa-plus"></i> 添加新景点
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>

    <!-- 分页 -->
    {% if is_paginated %}
    <div class="row">
        <div class="col-md-12 text-center">
            <ul class="pagination">
                {% if page_obj.has_previous %}
                <li>
                    <a href="?page={{ page_obj.previous_page_number }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                        &laquo; 上一页
                    </a>
                </li>
                {% endif %}

                {% for i in paginator.page_range %}
                    {% if page_obj.number == i %}
                    <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                    {% else %}
                    <li>
                        <a href="?page={{ i }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                            {{ i }}
                        </a>
                    </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                <li>
                    <a href="?page={{ page_obj.next_page_number }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                        下一页 &raquo;
                    </a>
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
    {% endif %}
</div>

<style>
/* 景点卡片样式 */
.attraction-card {
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
}

.attraction-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #337ab7;
}

/* 图片容器 */
.attraction-image-container {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.attraction-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.attraction-card:hover .attraction-image {
    transform: scale(1.05);
}

/* 图片悬停遮罩 */
.attraction-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.attraction-card:hover .attraction-overlay {
    opacity: 1;
}

/* 标题样式 */
.attraction-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.4;
}

.attraction-title a {
    color: #333;
    text-decoration: none;
}

.attraction-title a:hover {
    color: #337ab7;
}

/* 位置信息 */
.location-info {
    margin-bottom: 10px;
    font-size: 13px;
}

/* 描述文本 */
.attraction-description {
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 15px;
    height: 60px;
    overflow: hidden;
}

/* 统计信息 */
.attraction-stats {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .attraction-image-container {
        height: 150px;
    }

    .col-md-4, .col-sm-6 {
        margin-bottom: 20px;
    }
}

/* 分页样式 */
.pagination > li > a {
    color: #337ab7;
}

.pagination > .active > a {
    background-color: #337ab7;
    border-color: #337ab7;
}

/* 统计数字样式 */
.well h4 {
    margin: 5px 0;
    font-weight: bold;
}
</style>

{% endblock %}